<template>
	<view class="page">
		<view class="tab-content">
			<view class="tab-menu">
				<view v-bind:class="[currentTab==0?'tab-menu-select':'default']" data-current="0" @click="switchNav">
					全部
				</view>
				<view v-bind:class="[currentTab==1?'tab-menu-select':'default']" data-current="1" @click="switchNav">
					提交
				</view>
				<view v-bind:class="[currentTab==2?'tab-menu-select':'default']" data-current="2" @click="switchNav">
					接收
				</view>
				<view v-bind:class="[currentTab==3?'tab-menu-select':'default']" data-current="3" @click="switchNav">
					进行
				</view>
				<view v-bind:class="[currentTab==4?'tab-menu-select':'default']" data-current="4" @click="switchNav">
					完成
				</view>
				<view v-bind:class="[currentTab==5?'tab-menu-select':'default']" data-current="5" @click="switchNav">
					评价
				</view>
				<view v-bind:class="[currentTab==6?'tab-menu-select':'default']" data-current="6" @click="switchNav">
					撤销
				</view>
			</view>
			<!-- :current='currentTab' -->
			<swiper class='tab-swiper' :current='currentTab' @change="tabChange">
				<block>
					<swiper-item>
						<view class="orderTitle" v-if="orderList==''">
							暂时没有提交过订单..
						</view>
						<view class="listBox" v-for="(item,index) in orderList" :key="index">
							<tui-list-view color="#777">
								<tui-list-cell arrow @click="goToDetail(item.orderId)">
									<view class="">
										订单编号：{{item.swiftNumber}}
									</view>
									<view class="">
										创建时间：{{item.createTime}}
									</view>
								</tui-list-cell>

							</tui-list-view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="orderTitle" v-if="submitList==''">
							暂时没有已提交的订单...
						</view>
						<view class="" v-for="(item,index) in submitList" :key="index">
							<view class="" v-if="item.status==0">
								<tui-list-view color="#777">
									<tui-list-cell arrow @click="goToDetail(item.orderId)">
										<view class="">
											订单编号：{{item.swiftNumber}}
										</view>
										<view class="">
											创建时间：{{item.createTime}}
										</view>
									</tui-list-cell>
								</tui-list-view>
							</view>

						</view>
					</swiper-item>
					<swiper-item>
						<view class="orderTitle" v-if="acceptList==''">
							暂时没有已接收的订单...
						</view>
						<view class="" v-for="(item,index) in acceptList" :key="index">
							<view class="" v-if="item.status==2">
								<tui-list-view color="#777">
									<tui-list-cell arrow @click="goToDetail(item.orderId)">
										<view class="">
											订单编号：{{item.swiftNumber}}
										</view>
										<view class="">
											创建时间：{{item.createTime}}
										</view>
									</tui-list-cell>
								</tui-list-view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="orderTitle" v-if="ingList==''">
							暂时没有进行中的订单...
						</view>
						<view class="" v-for="(item,index) in ingList" :key="index">
							<view class="" v-if="item.status==3">
								<tui-list-view color="#777">
									<tui-list-cell arrow @click="goToDetail(item.orderId)">
										<view class="ingBox">
											<view class="ingLeft">
												<view class="">
													订单编号：{{item.swiftNumber}}
												</view>
												<view class="">
													创建时间：{{item.createTime}}
												</view>
											</view>
											<view class="refuse ingRight">
												<text @tap.stop="refuse(item.orderId)"
													class="iconfont icon-chexiao rightbutton"></text>
											</view>
										</view>
									</tui-list-cell>
								</tui-list-view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="orderTitle" v-if="overList==''">
							暂时没有已完成的订单...
						</view>
						<view class="" v-for="(item,index) in overList" :key="index">
							<view class="" v-if="item.status==4">
								<tui-list-view color="#777">
									<tui-list-cell arrow @click="goToDetail(item.orderId)">
										<view class="">
											订单编号：{{item.swiftNumber}}
										</view>
										<view class="">
											创建时间：{{item.createTime}}
										</view>
									</tui-list-cell>
								</tui-list-view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="orderTitle" v-if="evalList==''">
							暂时没有已评价的订单...
						</view>
						<view class="" v-for="(item,index) in evalList" :key="index">
							<view class="" v-if="item.status==5">
								<tui-list-view color="#777">
									<tui-list-cell arrow @click="goToDetail(item.orderId)">
										<view class="">
											订单编号：{{item.swiftNumber}}
										</view>
										<view class="">
											创建时间：{{item.createTime}}
										</view>
									</tui-list-cell>
								</tui-list-view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="orderTitle" v-if="revoList==''">
							暂时没有已撤销的订单...
						</view>
						<view class="" v-for="(item,index) in revoList" :key="index">
							<view class="" v-if="item.status==6">
								<tui-list-view color="#777">
									<tui-list-cell arrow @click="goToDetail(item.orderId)">
										<view class="">
											订单编号：{{item.swiftNumber}}
										</view>
										<view class="">
											创建时间：{{item.createTime}}
										</view>
									</tui-list-cell>
								</tui-list-view>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 4,
				index: 1,
				openId: '',
				flagid: 1,
				//全部订单
				orderList: [],
				submitList: [],
				acceptList: [],
				ingList: [],
				overList: [],
				evalList: [],
				revoList: [],

			}
		},
		onShow() {
			this.getOrderList();
		},
		onLoad(option) {
			console.log(option);
			this.currentTab = option.status;
			this.tabChange(option.status);
			this.openId = wx.getStorageSync("openId");
			this.getOrderList();
		},
		methods: {
			//将进行中的订单撤销
			refuse(orderid) {
				let that = this;
				uni.showModal({
					title:'撤销订单',
					content:'确定要撤销该进行中的订单吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: 'https://zioncloud.top/lease/repairOrder/revoke',
								data: {
									openId: that.openId,
									orderId: orderid,
								},
								method: "POST",
								header: {
									"Content-Type": "application/json"
								},
								success(res){
									console.log(res);
									that.getOrderList();
								}
							})
						}else if(res.cancel){
							uni.showToast({
								title:'用户取消了撤销操作',
								icon:'none',
								duration:1000
							})
						}
						}
				})
				
			},
			//前往详情页
			goToDetail(orderId) {
				uni.navigateTo({
					url: "../detailPage/detailPage?orderId=" + orderId
				})
			},
			//获取订单列表
			getOrderList() {
				let that = this;
				uni.request({
					url: "https://zioncloud.top/repair/order/getOrders",
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						"openId": that.openId
					},
					method: "POST",
					success(res) {
						that.orderList = res.data.data.orders.list;
						// console.log(that.orderList);
						that.submitList = [];
						that.acceptList = [];
						that.ingList = [];
						that.overList = [];
						that.evalList = [];
						that.orderList.forEach(function(value, index) {
							console.log(value);
							if (value.status == 0) {
								that.submitList[that.submitList.length] = value;
								console.log(that.submitList);
							} else if (value.status == 2) {
								that.acceptList[that.acceptList.length] = value;
							} else if (value.status == 3) {
								that.ingList[that.ingList.length] = value;
							} else if (value.status == 4) {
								that.overList[that.overList.length] = value;
							} else if (value.status == 5) {
								that.evalList[that.evalList.length] = value;
							} else if (value.status == 6) {
								that.revoList[that.revoList.length] = value;
							}
						})
						console.log('上面是订单列表');
					}
				})
			},
			//tab切换函数，让swiper当前滑块的current的index与tab头部index一一对应
			switchNav: function(e) {
				this.currentTab = e.currentTarget.dataset.current;
				console.log('点击');
				console.log(this.currentTab);
			},
			//滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应
			tabChange(e) {
				console.log('滑动');
				if (this.flagid == 1) {
					this.flagid = this.flagid + 1;
					this.currentTab = e;
				} else {
					this.currentTab = e.detail.current;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		height: auto;
	}

	.tab-swiper {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		box-sizing: border-box;
		/* padding: 170rpx 0rpx 0rpx 0rpx; */
		padding: 92rpx 0rpx 0rpx 0rpx;
		z-index: -1;
	}

	.tab-swiper swiper-item {
		overflow-y: scroll;
	}

	.tab-content {
		background-color: #fff;
	}

	.tab-menu {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		border-bottom: 1px solid #f2f2f2;
		z-index: 11;
	}

	.tab-menu view {
		margin: 0rpx auto;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #434343;
	}

	.tab-menu .tab-menu-select {
		position: relative;
	}

	.tab-menu .tab-menu-select:after {
		position: absolute;
		left: -7rpx;
		bottom: 0rpx;
		content: "";
		width: 70rpx;
		height: 8rpx;
		background-color: rgb(235, 21, 60);
		border-radius: 4px 4px 0 0;
	}

	// 列表内容
	.listItem {
		height: 150rpx;
		width: 100%;
		background-color: #ddd;
	}

	// 进行中
	.ingBox {
		overflow: hidden;
	}

	.ingLeft {
		float: right;
		width: 84%;
	}

	.ingRight {
		float: left;
		width: 15%;
		height: 60rpx;
		margin-top: 10rpx;
		text-align: center;
		// margin-right: 30rpx;
	}

	.rightbutton {
		width: 100%;
		height: 60rpx;
		font-size: 60rpx;
		color: #007AFF;
	}
	
	.orderTitle{
		text-align: center;
	}
</style>
